<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 属性选择器 </title>
    <style>
        /* p[class]{
            color: red;
        } */

        p[class="p1"]{
            color: red;
        }

        p[class ^='p']{
            font-size: 20px;
        }/*开头是p被选中*/

        p[class $='2']{
            text-decoration: line-through;
        }/*结尾是2被选中*/

        p[class *='1']{
            text-shadow: 0 0 20px red;
        }/*包含1被选中*/

        input[class='username']{
            background-color: red;
        }
    </style>
</head>
<body>
    
    <p class="p1">段落1</p>
    <p class="p2">段落2</p>
    <p class="pi1">段落3</p>
    <p class="text12">段落4</p>

    <form action="">
        <input type="text" class="username">
        <input type="text" class="password">
    </form>

</body>
</html>